<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>Beehive</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}">
    <link rel="stylesheet" th:href="@{/beehive/css/main.css}">
    <link rel="stylesheet" th:href="@{/beehive/css/detail.css}">
    <link rel="stylesheet" th:href="@{/css/beeui.css}">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <!-- jq要放在layui.js前（依赖）-->
    <script th:src="@{/js/jquery-3.4.0.js}"></script>
    <script th:src="@{/layui/layui.js}"></script>
    <script th:src="@{/js/vue.js}"></script>

    <style>
        .board {
            color: #e8e8e8;
        }

        .focus {
            color: #e23e57;
        }

    </style>


</head>

<body>


<!-- 应用公共头部 -->
<header th:replace="~{common :: header}"></header>

<!-- 导航条 -->
<nav th:replace="common :: commonNav"></nav>


<div style="background-color: rgb(245, 246, 250);">
<div class="box clear" style="background-color: #fff; margin: 0 auto; padding: 30px 0">
    <div class="list">
        <!-- 法式小面包导航 -->
        <div class="beeui-nav">
            <span>当前位置：&#32;</span>
            <a th:href="@{/index.html}" class="grey"> 蜂巢书屋 </a>
            <span>&#32;>&#32;</span>
            <span><a th:href="@{'/theme/' + ${theme.id}}" class="grey">[[${theme.name}]]</a></span>
            <span>&#32;>&#32;</span>
            <span>[[${book.title}]]</span>

        </div>

        <div class="beeui-left-block2 mt-2">
            <h4>图书信息</h4>
        </div>

        <!-- bootstrap布局大法好 -->
        <div class="container-fluid">
            <div class="row beeui-book-info">
                <div class="col-4">
                    <img class="rounded-lg"
                         th:src="${book.img == null} ? '/img/default_book.png' : ${#strings.replace(book.img,'d:/bms/book','/path')}"
                         width="200px" height="200px">
                </div>
                <div class="col">
                    <div class="row"><h2>[[${book.title}]]</h2></div>
                    <div class="row mt-4">
                        <div class="col-2">作&emsp;者:</div>
                        <div class="col">[[${book.author != null} ? ${book.author} : '佚名']]</div>
                    </div>
                    <div class="row mt-2">
                        <div class="col-2">主&emsp;题:</div>
                        <div class="col">[[${theme.name}]]</div>
                    </div>
                    <div class="row mt-2">
                        <div class="col-2">出&emsp;版:</div>
                        <div class="col">[[${book.press != null} ? ${book.press} : '佚名']]</div>
                    </div>
                    <div class="row mt-2">
                        <div class="col-2">时&emsp;间:</div>
                        <div class="col">[[${book.pressTime !=null} ? ${book.pressTime} : '——']]</div>
                    </div>
                    <div class="row mt-2">
                        <div class="col-2">下&emsp;载:</div>
                        <div class="col"><a href="#download">[[${book.src != null} ? '点我下载' : '暂无资源']]</a></div>
                    </div>
                </div>
            </div>
        </div>


        <div class="beeui-left-block2">
            <h4>内容提要</h4>
        </div>

        <div class="beeui-ml-30">
            <p class="beeui-desc">[[${book.description != null} ? ${book.description} : '暂无简介']]</p>
        </div>

        <div class="beeui-left-block2">
            <h4 id="download">在线下载</h4>
        </div>

        <div class="beeui-ml-30" th:if="${book.src != null}">
            <div class="beeui-down" style="background-color: #fafafa; padding: 10px 30px">
                <p>文件名称：[[${#strings.substringAfter(book.src, '/src/')}]]</p>
                <!-- formatDecimal无法获取小数位 -->
                <p style="position:relative;">
                    文件大小：[[${book.size != null} ? ${#numbers.formatInteger((book.size / 1024 / 1024), 1, 'POINT')} +
                    'MB' : '']]
                    <span style="position:absolute;left:40%;">文件格式：[[${#strings.substringAfter(book.src, '.')}]]</span>
                </p>
                <p style="position:relative;">
                    上传时间：[[${#strings.substring(book.uploadTime, 0, 10)}]]
                    <span style="position:absolute;left:40%;">作者信息：[[${book.author != null ? book.author : '佚名'}]]</span>
                </p>
                <p>
                    <a class="layui-btn layui-btn-normal" onclick="openNew()">点击下载</a>
                </p>
            </div>
        </div>

        <div class="beeui-ml-30" th:if="${book.src == null}">
            <div class="beeui-down">
                <p>请联系管理员提供资源!</p>
            </div>
        </div>

        <div class="beeui-left-block2">
            <h4>用户评论</h4>
        </div>

        <!-- 输入评论框，需增加if条件（仅对用户开放） -->
        <div class="container" id="comment" th:if="${session.loginUser != null}">
            <div class="row">
                <div class="col-2">
                    <div class="row">
                        <img th:src="${#strings.replace(session.loginUser.src, 'd:/bms/book', '/path')}"
                             class="rounded headImg">
                    </div>
                    <div class="row">
                        <span class="comment-name" id="tip" th:text="${session.loginUser.username}" style="color: #fdb87d">李华</span>
                    </div>
                </div>
                <div class="col comment-div">
                    <div class="row">
                        <form class="form-inline content-width">
                            <!-- 这里只能内联CSS，引用外部无效（.content-text） -->
                            <textarea class="form-control" id="content" rows="4"
                                      style="width: 100%; min-height: 100px; max-height: 140px;"
                                      placeholder="发表评论，请注意文明用语"></textarea>
                        </form>
                    </div>
                    <div class="row">
                        <div class="col">
                            <!-- 改用laer弹层提示-->
                            <!--<span class="comment-tip">tips</span>-->
                        </div>
                        <div class="col">
                            <a class="layui-btn layui-btn-primary layui-btn-sm comment-btn" onclick="toSubmit()">提交</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 用户未登录提示框 -->
        <div class="beeui-ml-30" th:if="${session.loginUser == null}">
            <div class="beeui-down">
                <p>登录后方可评论!&emsp;<a th:href="@{/login.html}">点击登录</a></p>
            </div>
        </div>

        <!-- 评论显示列表 -->
        <div class="container">
            <div class="row mt-3" th:each="comment : ${commentList}">
                <div class="col-2">
                    <div class="row">
                        <img th:src="${#strings.replace(comment.src, 'd:/bms/book', '/path')}"
                             class="rounded headImg">
                    </div>
                    <div class="row">
                        <span class="comment-name">[[${comment.username}]]</span>
                    </div>
                </div>
                <div class="col comment-div">
                    <div class="row" style="border-top: 1px solid #eeeeee">
                        <p style="width: 100%; min-height: 64px; max-height: 140px; margin-top: 6px; font-family: monospace">[[${comment.content}]]</p>
                    </div>
                    <div class="row">
                        <div class="col">
                            <!-- 改用laer弹层提示-->
                            <!--<span class="comment-tip">tips</span>-->
                        </div>
                        <div class="col">
                            <span style="float: right; margin-right: -15px; color: #6e828a; font-family: emoji">[[${#dates.format(comment.created, 'yyyy-MM-dd HH:mm:ss')}]]</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>



    </div>

    <div class="list2">
        <div class="one" style="margin-top: 40px;">
            <p style="color: #00adb5">新书推荐</p>
            <div class="notice">
                <ul>
                    <li th:each="book, stat: ${newList}">
                        <span class="layui-badge layui-bg-green">[[${stat.count}]]</span>&emsp;
                        <a th:href="@{/detail(id=${book.id})}">[[${book.title}]]</a>
                    </li>
                </ul>
            </div>
        </div>

        <div id="app" class="two">
            <p>
                <a @click="show = true" :class="[normalClass, show ? activeClass : '']">大家爱看</a>
                <a @click="show = false" :class="[normalClass, !show ? activeClass : '']">下载热榜</a>
            </p>
            <ul v-if="show" style="display: block">
                <li th:each="book, stat: ${visitList}">
                    <span class="layui-badge layui-bg-orange">[[${stat.count}]]</span>&emsp;
                    <a th:href="@{/detail(id=${book.id})}">[[${book.title}]]</a>
                </li>
            </ul>
            <ul v-if="!show" style="display: block">
                <li th:each="book, stat: ${downList}">
                    <span class="layui-badge">[[${stat.count}]]</span>&emsp;
                    <a th:href="@{/detail(id = ${book.id})}">[[${book.title}]]</a>
                </li>
            </ul>

        </div>

        <div class="three">
            <p style="color: #11999e">相关推荐</p>
            <div class="beeui-scroll">
                <ul>
                    <li th:each="book, stat : ${sameList}">
                        <span class="layui-badge layui-bg-blue">[[${stat.count}]]</span>&emsp;
                        <a th:href="@{/detail(id = ${book.id})}">[[${book.title}]]</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
</div>
<!-- 新窗口打开下载页面 -->
<script th:inline="javascript" th:if="${book.src != null}">
    function openNew() {
        let target = [[@{/toDownload(id=${book.id})}]];
            window.open(target);

    }
</script>


<!-- vue 控制组件切换（在改<script>标签内使用thyme leaf语法会导致失效（vue与thyme leaf冲突）） -->
<script>
    // 控制榜单切换
    let vm = new Vue({
        el: '#app',
        data: {
            show: true,
            activeClass: 'focus',
            normalClass: 'board'
        }
    });

    setInterval(function () {
        vm.show = !vm.show
    }, 6000);

</script>

<!-- 必须加if条件，否则渲染时由于使用了seesion.loginUser.id获取不到，报异常 -->
<script th:inline="javascript" th:if="${session.loginUser != null}">
    // 提交评论（只有用户才能评论，需要设置div的if条件，判断session）
    function toSubmit() {
        layui.use('layer', function () {
            let layer = layui.layer;
            let txt = $("#content").val();
            if (txt.length < 2) {
                layer.msg('评论内容不得小于2个字符', {icon: 5, anim: 6, time: 2200});
            } else {
                // post请求/comment/add（参数为bookId, userId, content）
                let obj = {bookId: [[${book.id}]], userId: [[${session.loginUser.id}]], content: txt};
                console.log("评论数据：" + JSON.stringify(obj));
                $.ajax({
                    url: '/comment/add',
                    type: 'post',
                    data: JSON.stringify(obj),
                    contentType: 'application/json;charset=utf-8',
                    success: function () {
                        layer.msg('提交成功，等待管理员审核', {icon: 1, time: 1000});
                        // 评论框消失，延迟执行（layer为异步，不延迟则弹出时评论框也消失）
                        setTimeout(function () {
                            $("#comment").fadeOut(1000);
                        }, 1000);
                    },
                    error: function () {
                        layer.msg('服务器开小差了~', {icon: 0, time: 1300});
                    }
                })
            }
        });
    }


    // 显示评论列表，可以获取数据，但不能通过data[i].属性名，显示Undefined
    // $.ajax({
    //     url: '/comment/listForUser',
    //     type: 'get',
    //     data: "bookId=" + [[${book.id}]],
    //     success: function (data) {
    //         console.log("ajax获取评论：" + data);
    //     },
    //     error: function () {
    //         console.log("服务器开小差了~")
    //     }
    // });


</script>

<!-- 列表滚动效果 -->
<script th:src="@{/beehive/js/detail.js}"></script>

<div th:replace="common :: commonFooter"></div>

</body>
</html>
